<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Product Details</title>
		<link rel="stylesheet" href="css/black-tie/jquery-ui-1.9.0.custom.css" type="text/css" />
		<link rel="stylesheet" href="css/theme1.css" type="text/css" />
		<link rel="stylesheet" href="css/style.css" type="text/css" />
		<script type="text/javascript">
			var productId;
			function getProductId(id){
				productId = id;
			}
			
			function changeLink()
			{
				var quantity = document.getElementById("quantity").value;
				window.location = "addToCartServlet?productId=" + productId + "&quantity=" + quantity;
			}
		</script>
		<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.9.0.custom.js"></script>
		<script type="text/javascript" src="js/common.js"></script>
<!-- 	<script type="text/javascript" src="js/validation.js"></script> -->
		<script type="text/javascript">
			var pRate = function(box, callBack) {
				this.Index = null;
				var B = $("#" + box), rate = B.children("i"), w = rate.width(), n = rate.length, me = this;
				for ( var i = 0; i < n; i++) {
					rate.eq(i).css({
						'width' : w * (i + 1),
						'z-index' : n - i
					});
				}
				rate.hover(function() {
					var S = B.children("i.select");
					$(this).addClass("hover").siblings().removeClass("hover");
					if ($(this).index() > S.index()) {
						S.addClass("hover");
					}
				}, function() {
					rate.removeClass("hover");
				})
				rate.click(function() {
					rate.removeClass("select hover");
					$(this).addClass("select");
					me.Index = $(this).index() + 1;
					if (callBack) {
						callBack();
					}
				})
			}
		</script>
		<style type="text/css">
			p{text-indent:2em;text-shadow:1px 1px 2px #ccc}
			.p_rate{height:14px;position:relative;width:80px;overflow:hidden;display:inline-block;background:url(images/rate-star.png) repeat-x;margin:5px 90px}
			.p_rate i{position:absolute;top:0;left:0;cursor:pointer;height:14px;width:16px;background:url(images/rate-star.png) repeat-x 0 -500px}
			.p_rate .select{background-position:0 -32px}
			.p_rate .hover{background-position:0 -16px}
		</style>
	</head>
	<body>
		<jsp:useBean id="product" class="mo.org.cm309.shoppingcart.entity.Product" scope="request"></jsp:useBean>
		<jsp:include page="sections/header.jsp"/>
		<div id="main">
			<div id="nav"><%=product.getCategory()%> > <%=product.getBrand()%> > <%=product.getProductname()%></div>
    		<div id="container">
    			<div id="gallery"><img src="data:image/png;base64,<%=product.getImageEncode() %>" alt="<%=product.getProductname() %>" /></div>
    			<div id="feature">
	    			<fieldset>
	    				<legend>Product Details</legend>
	    				<table>
							<tr>
								<td align="right"><label>Product Name : </label></td>
								<td><label><%=product.getProductname()%></label></td>
							</tr>
							<tr>
								<td align="right"><label>Category : </label></td>
								<td><label><%=product.getCategory()%></label></td>
							</tr>
							<tr>
								<td align="right"><label>Brand : </label></td>
								<td><label><%=product.getBrand()%></label></td>
							</tr>
							<tr>
								<td align="right"><label>Supplier : </label></td>
								<td><label><%=product.getSupplier()%></label></td>
							</tr>
							<tr>
								<td align="right"><label>Specification : </label></td>
								<td><label><%=product.getSpec1()%></label></td>
							</tr>
							<% if (product.getSpec2()!=null && !product.getSpec2().equals("")){ %>
								<tr>
									<td align="right"></td>
									<td><label><%=product.getSpec2()%></label></td>
								</tr>
							<%} %>
							<% if (product.getSpec3()!=null && !product.getSpec3().equals("")){ %>
								<tr>
									<td align="right"></td>
									<td><label><%=product.getSpec3()%></label></td>
								</tr>
							<%} %>
							<% if (product.getSpec4()!=null && !product.getSpec4().equals("")){ %>
								<tr>
									<td align="right"></td>
									<td><label><%=product.getSpec4()%></label></td>
								</tr>
							<%} %>
							<% if (product.getSpec5()!=null && !product.getSpec5().equals("")){ %>
								<tr>
									<td align="right"></td>
									<td><label><%=product.getSpec5()%></label></td>
								</tr>
							<%} %>
							<% if (product.getSpec6()!=null && !product.getSpec6().equals("")){ %>
								<tr>
									<td align="right"></td>
									<td><label><%=product.getSpec6()%></label></td>
								</tr>
							<%} %>
							<% if (product.getSpec7()!=null && !product.getSpec7().equals("")){ %>
								<tr>
									<td align="right"></td>
									<td><label><%=product.getSpec7()%></label></td>
								</tr>
							<%} %>
							<% if (product.getSpec8()!=null && !product.getSpec8().equals("")){ %>
								<tr>
									<td align="right"></td>
									<td><label><%=product.getSpec8()%></label></td>
								</tr>
							<%} %>
							<% if (product.getSpec9()!=null && !product.getSpec9().equals("")){ %>
								<tr>
									<td align="right"></td>
									<td><label><%=product.getSpec9()%></label></td>
								</tr>
							<%} %>
							<% if (product.getSpec10()!=null && !product.getSpec10().equals("")){ %>
								<tr>
									<td align="right"></td>
									<td><label><%=product.getSpec10()%></label></td>
								</tr>
							<%} %>
							<tr>
								<td align="right"><label>Description : </label></td>
								<td><label><%=product.getDesc()%></label></td>
							</tr>
							<tr>
								<td align="right"><label>Price : </label></td>
								<td><label><%=product.getPrice()%></label></td>
							</tr>
							<tr>
								<td align="right"><label>Discount : </label></td>
								<td><label><%=product.getDiscount()%></label></td>
							</tr>
							<tr>
								<td align="right"><label>Stock : </label></td>
								<td><label><%=product.getStock()%></label></td>
							</tr>
							<tr>
								<td align="right"><label>Sold  : </label></td>
								<td><label><%=product.getSold()%></label></td>
							</tr>
	    				</table>
	    			</fieldset>
	    		</div>
    			<div id='container-right'>
        			<fieldset id="cartpreview">
        				<legend>Add to Cart</legend>
        				Quantity: <input id="quantity" name="quantity" type="number" min="1" value="1" style="width:30%"/><br />
        				<a href="#" id="dialog-link" class="ui-state-default ui-corner-all" onClick="getProductId(<%=product.getId()%>)">Proceed</a>
        			</fieldset>
        			<fieldset id="rank">
        				<legend>Ranking</legend>
        				<p>Given your rate here!</p>
						<span class="p_rate" id="p_rate">
							<i title="1"></i>
							<i title="2"></i>
							<i title="3"></i>
							<i title="4"></i>
							<i title="5"></i>
						</span>
        			</fieldset>
        			<!-- ui-dialog -->
                    <div id="dialog" title="Proceed">
                        <p>Add to the cart?</p>
                    </div>
        		</div>
    		</div>
			<div id="comment">Comments</div>
		</div>
		<script>
			var Rate = new pRate("p_rate",function(){
				alert('Your rating '+Rate.Index+' points succeed!');
			});
		</script>
	</body>
</html>